  <template>
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary" icon="Plus" @click="addDialog = true" >添加角色</el-button>
        <el-button type="danger" icon="Delete" @click="deleteRole(multipleSelection)">批量删除</el-button>
      </el-form-item>
    </el-form>

    <el-form :inline="true" >
      <el-form-item label="角色名: ">
        <el-input v-model="roleName" placeholder="请输入角色名" autocomplete="off"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadTableData">搜索</el-button>
        <el-button @click="reset()"><el-icon><Delete/></el-icon>清空</el-button>
      </el-form-item>
    </el-form>

    <el-table :loading="loading" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" />
      <el-table-column property="roleName" label="角色名"/>
      <el-table-column property="roleDesc" label="角色描述"/>
      <el-table-column property="organizationName" label="组织名称" />
      <el-table-column property="createTime" label="创建时间" />
      <el-table-column label="状态" align="center">
        <template #default="scope">
          <el-switch size="small" v-model="scope.row.status" @click="updateStatus(scope.row.id, scope.row.status)" />
        </template>
      </el-table-column>
      <el-table-column label="操作" >
        <template #default="scope">
          <div style="display: flex; gap: 20px">
            <el-link type="primary" icon="edit" @click="showUpdate(scope.row)">修改</el-link>
            <el-link type="primary" icon="delete" @click="deleteRole(scope.row.id)">删除</el-link>
            <el-link type="primary" icon="paperclip" @click="showRoleAndMenuDialog(scope.row)">关联菜单</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        style="margin-top: 10px"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        size="small"
        :background="true"
        layout="prev, pager, next, total"
        @current-change="handleCurrentChange"
        :total="pagination.total"
    />
    <roleUpdate v-if="updateDialog" v-model:updateDialog="updateDialog" @loadData="loadTableData" v-model:row="RowData"/>
    <RoleAndMenuView v-if="roleAndMenuDialog" v-model:roleAndMenuDialog="roleAndMenuDialog" :row="rowRM" />
    <!--角色添加-->
    <role-add v-model:addDialog="addDialog" @loadTableData="loadTableData" />
  </template>

  <script lang="ts" setup>
  import roleUpdate from "./RoleUpdate.vue";
  import axios from "@/axios/index"
  import {reactive,ref} from "vue";
  import RoleAndMenuView from "./RoleAndMenuView.vue";
  import roleAdd from "./RoleAdd.vue";
  import {ElMessage, ElMessageBox} from "element-plus";
  import {Delete} from "@element-plus/icons-vue";

  //角色添加控制
  const addDialog = ref(false)
  //模糊查询
  let roleName=ref('')
  let roleAndMenuDialog = ref(false)
  let loading=ref(true);
  let tableData =ref([])
  let RowData=reactive({
    id:'',
    roleName:'',
    roleDesc:'',
  });
  let updateDialog=ref(false)
  let pagination=reactive({
    total:0,
    currentPage:1,
    pageSize:5
  })
  //关联菜单的角色信息
  let rowRM = reactive({})
  //状态值
  let status=ref(0)
  const multipleSelection = ref([])

  // 显示关联菜单界面
  function showRoleAndMenuDialog(row) {
    rowRM=row
    roleAndMenuDialog.value = true
  }
  //加载数据(搜索)
  function loadTableData() {
    loading.value = true;
    axios.get("roleOrganization/selectRoleOrganization", { params: {
        current: pagination.currentPage,
        size: pagination.pageSize,
        roleName:roleName.value,//姓名的值
       }
    }).then(resp => {
          loading.value = false;
          console.log(roleName.value)
      for (let i = 0; i < resp.data.data.records.length; i++) {
        if (resp.data.data.records[i].status == 1){
          resp.data.data.records[i].status = true
        }else {
          resp.data.data.records[i].status = false
        }
      }
          tableData.value = resp.data.data.records;
          pagination.currentPage = resp.data.data.current;
          pagination.pageSize = resp.data.data.size;
          pagination.total = resp.data.data.total;
        })
        .catch(error => console.error(error));
  }

  //清空搜索输入框
  function reset() {
    roleName.value = "";
    loadTableData();
  }

  //删除用户
  let deleteRole = function (id) {
    let ids = ref([])
    if (typeof id == "number") {
      ids.value.push(id)
    } else {
      for (let i = 0; i < id.length; i++) {
        ids.value.push(id[i].id)
      }
    }
    if (ids.value.length < 1) {
      ElMessageBox.alert('请选择至少一条数据', "系统提示", {
        confirmButtonText: '好的',
        type: 'warning'
      })
      return
    }
    ElMessageBox.confirm("该操作将永久删除角色,请确认时候继续操作?", "系统提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
        .then(() => {
          axios.get(`/role/deleteRole/${ids.value}`).then((response) => {
            ElMessage({
              type: "success",
              message: "删除成功",
            })
            loadTableData()
          })
        })
  }

  //多选框发生变化
  const handleSelectionChange = (val) => {
    multipleSelection.value = val
  }

  // 清空
  function empty() {
    roleName.value = "";
    loadTableData();
  }

  // 显示修改界面
  function showUpdate(data) {
    RowData.id = data.id
    RowData.roleName = data.roleName
    RowData.roleDesc = data.roleDesc
    console.log(data.id); // 添加这一行
    updateDialog.value = true
  }

  // 改变状态
  function updateStatus(id, status) {
    console.log(id)
    if (!id) {
      alert('ID不能为空');
      return;
    }

    // 确保状态值为1或0
    status = status ? 1 : 0;

    axios.put(`/role/updateStatus`, {
      id,
      status
    },{ headers: { 'content-type': 'application/json' } }).then(response => {
      console.log('更新成功', response);
      loadTableData(); // 更新状态后重新加载表格数据
    }).catch(error => {
      console.error('更新失败', error);
    });
  }

  /**
   * 切页
   */
  function handleCurrentChange(page) {
    pagination.currentPage = page
    loadTableData()
  }

  loadTableData();
  </script>

  <style lang="scss" scoped>

  </style>
